import { Badge, TabBar } from 'antd-mobile'
import {
  AppOutline,
  MessageOutline,
  MessageFill,
  UnorderedListOutline,
  UserOutline
} from 'antd-mobile-icons'
// 导入模块化样式表
import styles from '../css/tabbar.module.css'
import { useLocation, useNavigate } from 'react-router-dom'

function MyTabBar() {
  // tabbar 的数据源
  const tabs = [
    {
      key: '/home',
      title: '首页',
      icon: <AppOutline />,
      badge: Badge.dot
    },
    {
      key: '/order-list',
      title: '订单列表',
      icon: <UnorderedListOutline />,
      badge: '5'
    },
    {
      key: '/chat',
      title: '客服',
      icon: (active) => (active ? <MessageFill /> : <MessageOutline />),
      badge: '99+'
    },
    {
      key: '/me',
      title: '我的',
      icon: <UserOutline />
    }
  ]

  const nav = useNavigate()
  const location = useLocation()

  // 当 tabbar 的选中项发生变化，会触发这个函数，
  // 在形参中，可以获取到被选中项的 key 值
  const onTabChange = (key) => {
    nav(key)
  }

  return (
    <div className={styles.box}>
      <TabBar
        onChange={onTabChange}
        activeKey={location.pathname === '/' ? '/home' : location.pathname}
      >
        {/* 循环 tabbar 的数据源，生成每个 item 项 */}
        {tabs.map((item) => (
          <TabBar.Item
            key={item.key}
            icon={item.icon}
            title={item.title}
          />
        ))}
      </TabBar>
    </div>
  )
}

export default MyTabBar
